import {Tabs, TabsProps} from "antd";
import Wapper from "./style";
import write from "@/static/imgs/courseContent/书写.svg";
import Directory from "./Directory";
import InteractiveCourseware from "@/pages/StudentCourseContent/CourseTeching/InteractiveCourseware";
import Homework from "@/pages/StudentCourseContent/CourseTeching/Homework";
import Test from "@/pages/StudentCourseContent/CourseTeching/Test";
import Information from "@/pages/StudentCourseContent/CourseTeching/Information";
import TencentMeeting from "@/pages/StudentCourseContent/CourseTeching/TencentMeeting";
import Notice from "@/pages/StudentCourseContent/CourseTeching/Notice";
import Topic from "@/pages/StudentCourseContent/CourseTeching/Topic";
import InteractiveQuizzes from "@/pages/StudentCourseContent/CourseTeching/InteractiveQuizzes";

const CourseLearning = () => {
    const onChange = (key: string) => {
        console.log(key);
    };

    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '目录',
            children: <Directory/>,
        },
        {
            key: '2',
            label: '互动课件',
            children: <InteractiveCourseware/>,
        },
        {
            key: '3',
            label: '作业',
            children: <Homework/>,
        }, {
            key: '4',
            label: '测试',
            children: <Test/>,
        }, {
            key: '5',
            label: '资料',
            children: <Information/>,
        }, {
            key: '6',
            label: '腾讯会议',
            children: <TencentMeeting/>,
        }, {
            key: '7',
            label: '公告',
            children: <Notice/>,
        }, {
            key: '8',
            label: '话题',
            children: <Topic/>,
        }, {
            key: '9',
            label: '互动答题',
            children: <InteractiveQuizzes/>,
        },
    ];
    return (
        <Wapper>
            <div className="tabs">
                <Tabs defaultActiveKey="1" items={items} onChange={onChange}/>
                <div className="btn-customized flex">
                    <img className="icont" src={write} alt=""/>
                    <div>定制</div>
                </div>
            </div>
        </Wapper>
    )
}
export default CourseLearning;